<template>
  <div>
    <div>child子组件 - {{ name }}</div>
    <div>count: {{ count }}</div>
    <button @click="handleClick">btn</button>
    <input type="text" @input="fn" />
  </div>
</template>

<script setup lang="ts">
import { inject } from "vue";

// vue提供的方法
// const { count } = defineProps({
//   count: Number,
//   age: {
//     type: Number,
//     required: true,
//   },
// });

// ts提供的方式
// interface Props {
//   count: number;
// }
const { count } = defineProps<{
  count: number;
  age?: number;
}>();

// vue提供的方法
// const emits = defineEmits(["abc"]);
const emits = defineEmits<{
  (e: "abc", n: number): void;
}>();

const handleClick = () => {
  emits("abc", 666);
};

// event事件对象的固定的写法
const fn = (e: Event) => {
  console.log((e.target as HTMLInputElement).value);
};

// inject的数据类型和ref一样
const name = inject<string>("name");
</script>
